// 全局样式
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// 自定义样式
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  line-height: 1.6;
  color: #334155;
}

// 自定义组件样式
@layer components {
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-white hover:bg-gray-50 text-primary-600 font-medium py-3 px-6 rounded-lg border border-primary-600 transition-colors duration-200;
  }
  
  .section-padding {
    @apply py-16 md:py-24;
  }
  
  .container-custom {
    @apply mx-auto px-4 sm:px-6 lg:px-8;
    max-width: 1200px; /* 贴近参考站宽度 */
  }
  
  .gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

// 动画效果
.sa { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.sa-in { opacity: 1; transform: translateY(0); }

.sa-fade { opacity: 0; transition: opacity .6s ease; }
.sa-fade.sa-in { opacity: 1; }

// 响应式字体大小
@screen sm {
  html {
    font-size: 16px;
  }
}

@screen md {
  html {
    font-size: 18px;
  }
}

@screen lg {
  html {
    font-size: 20px;
  }
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
